<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="Keywords" content="果壳,果壳网,科技,泛科技,智趣,生活,科普" />
    <meta name="Description" content="果壳网是一个泛科技主题网站，提供负责任、有智趣、贴近生活的内容，你可以在这里阅读、分享、交流、提问。果壳网致力于让科技兴趣成为人们文化生活和娱乐生活的重要元素。" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<![endif]-->
    <style>
        ul {
            list-style: none;
            /*去掉圆点*/
        }
        div a span ul li {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 0px auto;
            position: relative;
            width: 500px;
            height: 100px;
            line-height: 100px;
            border-style: solid;
            border-color: red;
            border-width: 5px;
        }
        .point {
            position: absolute;
            top: 50%;
            margin-top: -3px;
            width: 6px;
            height: 6px;
            background-color: #999;
        }
        span {
            display: block;
            width: 5px;
            height: 5px;
            background-color: #999;
        }
        a {
            margin-left: 16px;
            height: 50px;
            line-height: 50px;
            display: inline-block;
            text-decoration: none;
            /*            border: 5px solid green;*/
            font-size: 24px;
        }
        /*eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
        ul li.other {
            position: relative;
            width: 100px;
            height: 40px;
            *top: 0px!important;
        }
        ul li.other a {
            font-size: 18px;
            font-family: "Microsoft YaHei";
            color: #4BA733;
            position: relative;
            _z-index: 2;
        }
        ul .triangle {
            position: absolute;
            width: 0px;
            height: 0px;
            line-height: 0;
            left: 40px;
            top: 8px;
            border-width: 5px 4px 0;
            border-style: solid;
            border-color: #4BA733 transparent transparent;
            *left: 40px!important;
            *top: 8px!important;
            _border-style: solid dashed dotted dashed;
        }
        .nav-ul-pop {
            display: none;
            position: absolute;
            top: 32px;
            left: -34px;
            padding-top: 5px;
            padding-bottom: 5px;
            background-color: #FFF;
            border: 1px solid #E0E0E0;
            *width: 100px!important;
            *z-index: 3!important;
            _z-index: 3;
        }
        .nav-ul-pop a {
            display: block;
            width: 70px;
            height: 18px;
            line-height: 16px;
            padding: 5px 15px 5px 15px;
            text-align: right;
            color: #666;
            font-size: 16px;
        }
        .nav-ul-pop a:hover {
            background-color: #C0BBBB;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li.other").hover(function () {
                //stop()停止动画效果
                $("#nav-ul-pop").stop().slideToggle("slow");
            }, function () {
                $("#nav-ul-pop").stop().slideToggle("hide");
            });
        });
    </script>
</head>

<body>
    <div class="box">
        <div class="point">
        </div>
        <a href="#">汽车越大或者越重就越安全吗？</a>
    </div>
    <div class="box2">
        <ul>
           <li>aaa</li>
            <li class="other">
                <a href="#">其他<div class="triangle"></div>
                        </a>
                <div id="nav-ul-pop" class="nav-ul-pop">
                    <a href="#">日志</a>
                    <a href="#">流言百科</a>
                    <a href="#">日志</a>
                    <a href="#">日志</a>
                    <a href="#">流言百科</a>
                    <a href="#">日志</a>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>